<template>
  <div>
    <div style="margin-bottom:20px;">
        <a-input-search
          placeholder="请输入用户账号"
          @search="onSearch"
          enterButton="搜索"
          :loading="searchLoading"
          v-model="searchText"
          style="width:220px;"
          size="default"
      />
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="out_id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="action"  slot-scope="text,record"> <a-button  type="primary" @click="checkDetail(record)">审核</a-button> </template>
    </a-table>
    <a-modal title="审核提现" v-model="modalVisible" :width="800" :footer="null">
      <a-row>
        <a-col :xs="18" :sm="18">
          <detail-list size="small" :col="2">
            <detail-list-item term="用户昵称">{{taskItem.nickname}}</detail-list-item>
            <detail-list-item term="用户账号">{{taskItem.phone}}</detail-list-item>
            <detail-list-item term="提现账号">{{taskItem.out_user}}</detail-list-item>
            <detail-list-item term="提现姓名">{{taskItem.out_name}}</detail-list-item>
            <detail-list-item term="提交时间">{{taskItem.create_time}}</detail-list-item>
          </detail-list>
        </a-col>
        <a-col :xs="6" :sm="6">
          <a-row>
            <a-col :xs="12" :sm="12">
              <div class="text">状态</div>
              <div class="heading" style="color: #0493FE;">待审核</div>
            </a-col>
            <a-col :xs="12" :sm="12">
              <div class="text">提现金额</div>
              <div class="heading">{{taskItem.num}}</div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-divider style="margin-bottom: 32px"/>
       <a-row>
        <a-col :xs="24" :sm="24">
          <div> <span style="color:red;">*</span> 审核理由:</div>
          <div style="margin-bottom:100px;margin-top:10px;">
            <a-textarea v-model="remark" placeholder="必填" style="resize:none; height:160px;"  maxlength="80"/>
          </div>
          <div style="text-align: center;">
            <a-button @click="passTask('确认审核失败？',2)">审核失败</a-button>
            <a-button @click="passTask('确认审核通过？',1)" type="primary" style="margin-left: 50px;">审核通过</a-button>
          </div>
        </a-col>
      </a-row>
    </a-modal>
    <!-- <a-modal class="img_modal" v-model="modalImg" :footer="null" :closable="false" :zIndex="1001" :width="480">
      <a-card hoverable style="width: 480px" @click="showBigImg">
          <img
            alt="example"
            :src="taskItem.image"
            slot="cover"
          />
        </a-card>
    </a-modal> -->
  </div>
</template>

<script>
import moment from 'moment'
import { outList, outMod } from '@/api/getData'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'AuditAmount',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '用户昵称',
            dataIndex: 'nickname'
            },
            {
            title: '用户账号',
            dataIndex: 'phone'
            },
            {
            title: '提现账号',
            dataIndex: 'out_user'
            },
            {
            title: '提现姓名',
            dataIndex: 'out_name'
            },
            {
            title: '创建时间',
            dataIndex: 'create_time'
            },
            {
            title: '状态',
            dataIndex: 'status'
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: '',
        searchStatus: '1',
        modalVisible: false,
        modalImg: false,
        taskItem: {},
        remark: ''
    }
  },
  mounted () {
    this.queryTaskList()
  },
  methods: {
    checkDetail(record){
        this.taskItem = record
        this.modalVisible = true
    },  
    queryTaskList(){
        this.tableLoding = true
        outList(this.pagination.current,this.pagination.pageSize,this.searchText,this.searchStatus).then(res=>{
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
            this.searchText = ''
        })
    },
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.queryTaskList()
    },
    setSearchStatus(value){
      this.searchStatus = value
    },
    showBigImg(){
      this.modalImg = true
    },
    setTaskAudit(status){
      outMod(this.taskItem.out_id,status,this.remark).then(res=>{
        this.$message.success('审核完成');
        this.queryTaskList()
      })
    },
    passTask(title,state){
      let that = this;
      if(this.remark){
        this.$confirm({
            title: title,
            content: '',
            onOk() {
              that.modalVisible = false
               that.setTaskAudit(state)
            },
            onCancel() {}
        });
      }else{
        this.$message.warning('请填写备注');
      }
    }
  }
}
</script>

<style scoped>
.text {
  color: rgba(0, 0, 0, .45);
}
.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

</style>
